<template>
  <div class="guide">
    <h3>Fiber Optic Product Selector Guide</h3>
    <div id="outer" class="fibersel">
      <table cellspacing="0" border="0" id="fibersel">
        <tbody><tr>
          <td class="blue">
            <ul class="first">
              <li onclick="showModules('v_analog');">Analog</li>
              <li onclick="showModules('v_sdi');">SD-SDI</li>
              <li onclick="showModules('v_hdsdi');">HD-SDI</li>
              <li onclick="showModules('v_3gbs');">3Gb/s</li>
              <li onclick="showModules('v_dvb');">DVB-ASI</li>
              <li onclick="showModules('v_rgb');">RGB/DVI</li>
            </ul>
            <ul>
              <li onclick="showModules('a_analog');">Analog</li>
              <li onclick="showModules('a_aes');">AES</li>
              <li onclick="showModules('a_inter');">Intercom</li>
            </ul>
            <ul>
              <li onclick="showModules('rs232');">RS-232/422/485</li>
              <li onclick="showModules('gpi');">GPI/GPO</li>
            </ul>
            <ul>
              <li onclick="showModules('ether');">10/100 Ethernet</li>
              <li onclick="showModules('ltc');">Gigabit Ethernet</li>
              <li onclick="showModules('fibch');">Fiber Channel</li>
              <li onclick="showModules('gps');">GPS</li>
            </ul>
            <ul>
              <li onclick="showModules('ds3');">DS3/E3</li>
              <li onclick="showModules('ref');">T1/E1</li>
              <li onclick="showModules('sonet');">SONET/SDH</li>
            </ul>
            <ul>
              <li onclick="showModules('lban');">L-Band</li>
              <li onclick="showModules('ifban');">70/140MHz I/F</li>
            </ul>
          </td>
          <td class="red">
            <ul>
              <li onclick="showModules('oo');">Wavelength Shifter / Regenerator</li>
              <li onclick="showModules('opelec');">Optical / Electrical Routing</li>
            </ul>
          </td>
          <td class="grey">
            <ul>
              <li onclick="showModules('wdm');">WDM</li>
              <li onclick="showModules('cwdm');">Coarse WDM</li>
              <li onclick="showModules('dwdm');">Dense WDM</li>
            </ul>
          </td>
          <td class="green">
            <ul>
              <li onclick="showModules('oppro');">Optical Protection</li>
              <li onclick="showModules('opdis');">Optical Distribution</li>
            </ul>
          </td>
          <td class="magenta">
            <ul>
              <li onclick="showModules('opamp');">Optical Amplification</li>
            </ul>
          </td>
        </tr>
        <tr><td colspan="5" style="height:8px"><!-- shadow spacing --></td></tr>
        </tbody>
      </table>

      <div id="results">
        <h4>Optical Protection</h4>
<!--        <dl style="opacity: 1;"><dt class="heading">Optical Protection Switching</dt><dt><img src="/assets/images/product/vistalink.png" alt="VistaLINK Enabled"><a href="/products/7707BPX">7707BPX</a></dt><dd>Auto-Switching 2x1 Optical Bypass Protection Switch</dd></dl></div>-->
      <div id="blfooter">
        See also: <a href="/tools/optical-power-budget-calculator">Optical Power Budget Calculator</a>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "ProductGuide",
  setup(){

  }
}
</script>

<style scoped lang="scss">
.guide{
  h3{
    font-size: 1.8vw;
    text-transform: none;
    margin: 2vw 0;
    color:#777272
  }
  #outer {
    width:960px;
    margin:0px auto;
    position:relative;
  }

  #results {
    position:absolute;
    top:0px;
    right:0px;
    width:290px;
    border:2px groove #808080;
    background-color:#f6f6f6;
    box-shadow:inset 0px -100px 100px -100px #999999;
  }
  #results h4 {
    color:#ffffff;
    /* background:#222222 url(/img/products.toolstitlebkg.png) repeat-x scroll left top; */
    background-color:#222222;
    font-size:12px;
    font-weight:bold;
    height:1.2em;
    line-height:1.2em;
    padding:4px 2px;
    margin:0px;
    text-align:center;
  }
  #results dl {
    padding:5px;
    margin:0px;
    height:397px;
    font-size:12px;
    overflow:auto;
    text-align:left;
  }
  #fibersel {
    margin:0px auto 0px 0px;
    font-size:12px;
    //background:url("/src/assets/images/product/guide.jpg") no-repeat scroll left top;
    height:442px;
  }
  #fibersel tr td {
    padding:0px;
    text-align:left;
    vertical-align:top;
  }
  #fibersel tr td ul {
    list-style-type:none;
    margin:0px;
    padding:0px;
  }
  #fibersel tr td ul li {
    border:1px solid #cccccc;
    border-bottom:1px solid #111111;
    text-align:center;
    color:#ffffff;
    background-color:transparent;
    font-size:11px;
    cursor:pointer;
    margin:0px auto;
    line-height:1.3em; /* Fix for Opera zoom rounding */

    -webkit-transition:background-color 0.25s ease;
    transition:background-color 0.25s ease;
  }

  #fibersel tr td.blue {
    vertical-align:top;
    width:145px;
  }
  #fibersel tr td.blue ul {
    margin-top:16px;
  }
  #fibersel tr td.blue ul.first {
    margin-top:9px;
  }
  #fibersel tr td.blue ul li {
    width:82px;
    border-left:1px solid #888EDA;
    border-right:1px solid #888EDA;
    white-space:nowrap;
    margin:0px auto 0px 57px;
    padding:0px;
  }
  #fibersel tr td.blue ul li:hover {
    background-color:#3E4487;
  }

  #fibersel tr td.red {
    width:110px;
    padding-top:49px;
  }
  #fibersel tr td.red ul li {
    width:67px;
    border-left:1px solid #e68F93;
    border-right:1px solid #e68F93;
    padding:50px 0px;
    margin:0px auto 40px 34px;
  }
  #fibersel tr td.red ul li:hover {
    background-color:#ae2c3b;
  }

  #fibersel tr td.grey {
    width:92px;
    padding-top:70px;
  }
  #fibersel tr td.grey ul li {
    width:48px;
    border-left:1px solid #c4c5ca;
    border-right:1px solid #c4c5ca;
    padding:25px 0px;
    margin:0px auto 30px 35px;
  }
  #fibersel tr td.grey ul li:hover {
    background-color:#73899f;
  }

  #fibersel tr td.green {
    width:127px;
    padding-top:129px;
  }
  #fibersel tr td.green ul li {
    width:63px;
    border-left:1px solid #76c76c;
    border-right:1px solid #76c76c;
    padding:20px 0px;
    margin:0px auto 30px 54px;
  }
  #fibersel tr td.green ul li:hover {
    background-color:#329428;
  }

  #fibersel tr td.magenta {
    width:145px;
    padding-top:189px;
  }
  #fibersel tr td.magenta ul li {
    width:69px;
    border-left:1px solid #c66ab7;
    border-right:1px solid #c66ab7;
    padding:5px 0px;
    margin:0px auto 0px 33px;
  }
  #fibersel tr td.magenta ul li:hover {
    background-color:#8a268c;
  }

  #blfooter {
    position:absolute;
    top:416px;
    left:340px;
    font-size:12px;
  }
  #blfooter a {
    font-weight:bold;
  }

  #outer.fibersel #results div#noscript {
    height:386px;
  }
}
</style>
